html {
	font-family: Arial, sans-serif;
	font-size: 13px;
}

hr { border-top-color: #ccc; }


/* text colors */
.font-blue { color: #769cd3; }
.font-green { color: #2693b8; }
.font-orange { color: #FF8000; }
.font-red { color: #BA264B; }

h1, h2, h3, h4, h5, h6 {
	font-family: "Arial Narrow",arial, verdana;
	color: #353535;
	font-weight: normal;
}
h3, h4, h5, h6 {
	line-height: 20px;
	margin-top: 20px;
}

code {
	color: #353535;
}


/* modal dialog */
.modal-overlay {
	position: fixed;
	top:0; 
	left:0;
	bottom: 0;
	right: 0;
	width: 100%; 
	height:100%;
	background: #999;
	opacity:0.3; 
	z-index: 10000;
}
.modal-box {
	position: fixed;
	width: 350px;
	height:150px;
	padding: 20px 30px;
	font-size:13px;
	border: 8px solid #999;
	background: #ffffff url(/openqrm/base/img/ajax-loader.gif) no-repeat center center;
	text-align: center;
	z-index: 10001;
}
.modal-box .ajax-loader {
	margin: 20px auto;
	z-index: 10002;
}


/* defaults */
.justify {
	text-align: justify;
}
.first {
	margin-top: 0;
	padding-top: 0;
}
.lead {
	font-size: 16px;
}
.pull-left {
	float: left;
}
.pull-right {
	float: right;
}
.hidden {
	display: none;
	visibility: hidden;
	line-height: 0;
	font-size: 0;
	margin: 0;
	padding: 0;
}
.disabled {
	opacity: .6;
	cursor: default;
}


/* pills */
.pill {
	padding: 2px 8px;
	color: #fff;
	font-size: 10px;
	line-height: 10px;
	text-transform: uppercase;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background: #444;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.pill a { color: #fff; text-decoration: none; }

.pill.storage {}
.pill.virtualization {}
.pill.cloud {}
.pill.enterprise { background: #2693b8; }
.pill.deployment {}
.pill.network {}
.pill.ha {}
.pill.monitoring {}
.pill.management {}
.pill.misc {}
.pill.active { background: #3AE08A; color: black; }
.pill.idle { background: silver; color: black; }
.pill.inactive { background: #2693B8; }
.pill.warning { background: #f69437; }
.pill.error { 
	background: red;
	color: #fff;		/* override '.htmlobject_tabs_box .error', htmlobject.css:94 */	
}
.pill.acknowledged { background: green; }

/* badge/pill colors */
.pill.green, .pill.notice, .badge.green {	background: #2693b8; }
.pill.red, .pill.error, .badge.red { background: #BA264B; }
.pill.orange, .pill.warning .badge.orange { background: #FF8000; }
.pill.yellow, .badge.yellow {	background: #CCCC00; }


/* Common link classes */
a.btn {}
a.badge {}
a.add {}
a.edit {}
a.details {}
a.console {}
a.resize {}
a.manage {}
a.migrate {}
a.clone {}
a.remove {}
a.snap {}
a.graphs {}
a.start {}
a.stop {}
a.enable {}
a.disable {}

a.btn,
a.badge, .badge,
a.add,
a.edit,
a.details,
a.console,
a.resize,
a.manage,
a.migrate,
a.clone,
a.remove,
a.snap,
a.graphs,
a.start,
a.stop,
a.enable,
a.disable,
a.configure,
a.logout,
input.password-button,
input[type="submit"],
input[type="button"],
.submit,
.htmlobject_table .actiontable input,
.htmlobject_tabs li a,
.htmlobject_tabs li.current a {
	display: inline-block;
	cursor: pointer;
	background: #999;
	line-height: 17px;
	font-family: arial, verdana;
	font-size: 10px;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-right: 3px;
	margin-bottom: 7px;
	padding: 4px 8px;
	border: 0;
	white-space: nowrap;
}

a:hover.btn,
a:hover.badge,
a:hover.add,
a:hover.edit,
a:hover.details,
a:hover.console,
a:hover.resize,
a:hover.manage,
a:hover.migrate,
a:hover.clone,
a:hover.remove,
a:hover.snap,
a:hover.graphs,
a:hover.start,
a:hover.stop,
a:hover.enable,
a:hover.disable,
input:hover.password-button,
input[type="submit"]:hover,
.submit:hover,
.htmlobject_table .actiontable input:hover,
.htmlobject_tabs li:hover a,
.htmlobject_tabs li:hover.current a {
	opacity: 0.8;
}

/* Quicklink buttons, use in dashboards
   Supports: 
     * icons: <i class="glyphicons-icon list"></i> (see glyphicons docs)
     * button-label: <span class="label">label</span>
     * colored corner
       top right with label
*/
a.quicklink {
	position: relative;
	display: inline-block;
	width: 90px;
	height: 60px;
	background: #e5e5e5;
	border: 1px solid #c9c9c9;
	text-align: center;
	overflow: hidden;

}
a.quicklink .label {
	display: block;
	clear: both;
	text-align: center;
	font-family: "Arial Narrow",arial, verdana;
	font-weight: bold;
	color: #444;
	text-shadow: none;
	text-transform: none;
	font-size: 13px;
}
a.quicklink  .glyphicons-icon {
	opacity: 0.8;
	text-align: center;
	width: 40px;
	height: 40px;
}
a.quicklink .corner {
	position: absolute;
	display: block;
	top: -13px;
	right: -3px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 20px solid #444;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
}
a.quicklink .corner-orange { border-right: 20px solid #f07109; }
a.quicklink .corner-green { border-right: 20px solid #82c782; }
a.quicklink .corner-blue { border-right: 20px solid #769cd3; }
a.quicklink label {
	position: absolute;
	top: -2px;
	right: 2px;
	font-size: 10px;
	letter-spacing: -1px;
}
a.logout {
	width: 24px;
	height: 24px;
	line-height: 24px;
	background: url('../img/logout.png') no-repeat center #999;
	float: right;
	margin: -2px 0 0 12px;
	padding: 0;
}



/* glyphicons customization */
.glyphicons i:before {
	font-size: 14px;
}


/* misc */
.chart-bar {
	position: relative;
	display: block;
	width: 90%;
	height: 12px;
	margin-top: 3px;
	background: #e5e5e5;
}

.chart-bar .bar {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 1%;
	max-width: 90%;
	height: 12px;
	background: #454545;
	margin: 0 30px 0 0;
}
.chart-bar .bar label {
	position: absolute;
	top: 0;
	bottom: auto;
	left: auto;
	right: -30px;
	font-size: 10px;
	line-height: 12px;
}
.chart-bar .peak {
	position: absolute;
	background: #ff0000;
	width: 1px;
	height: 12px;
	left: 0;
}

.bar-01 .bar { background: #82c782; width: 0%; }
.bar-02 .bar { background: #f07109; width: 0%; }
.bar-03 .bar { background: #769cd3; width: 0%; }

.doculink {
	background: url(../img/help_small.png) no-repeat top right transparent;
	line-height: 18px;
	display: block;
	margin: 0; 
	padding: 0 25px 0 0; 
	text-decoration: none;
}

/* fix .lead and <small> line-height when used in .table */
.table .lead {
	line-height: 20px;
}

/* htmlobjects overrides */
.htmlobject_tabs li.current a {
	background: #39aacb;
}

